<template>
  <div class="content">

    <!-- 左侧 -->
<!--    <transition name="fadel" mode="out-in">-->
      <div class="left-section">
        <!-- 观测站检测 -->
        <Monitor></Monitor>
        <!-- 历史时期 -->
<!--        <HistoryPeriod></HistoryPeriod>-->
        <!-- 设备列表 -->
        <DeviceList :current-content="currentContent" @device-click="handleDeviceClick"></DeviceList>
        <Plot></Plot>
      </div>
<!--    </transition>-->

    <!-- 中间区域 -->
    <div class="center-section">
      <HomeCenter :current-content="currentContent"></HomeCenter>
    </div>
    <!-- 右侧区域 -->
    <div class="right-section">
      <!-- 数据指标 -->
      <StatsBox></StatsBox>
      <!-- 物种观测 -->
      <MonitorChart></MonitorChart>
      <!-- 环境监测 -->
      <EnvironmentInfo></EnvironmentInfo>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
import Monitor from "@/components/Home/Monitor.vue";
import Plot from "@/components/Home/Plot.vue";
import HistoryPeriod from "@/components/Home/HistoryPeriod.vue";
import DeviceList from "@/components/Home/DeviceList.vue";
import StatsBox from "@/components/Home/StatsBox.vue";
import MonitorChart from "@/components/Home/MonitorChart.vue";
import EnvironmentInfo from "@/components/Home/EnvironmentInfo.vue";
import HomeCenter from "@/components/Home/HomeCenter.vue";
import { EventBus } from "../utils/event-bus";
let that;
export default {
  name: "Home",
  components: {
    CardBox,
    Monitor,
    HistoryPeriod,
    DeviceList,
    StatsBox,
    MonitorChart,
    EnvironmentInfo,
    HomeCenter,
    Plot
  },
  data() {
    return {
      show:false,
      identifyList:[
        {
          type: "audio",
          id: 200438,
          lon_gd:121.44413,
          lat_gd:31.151022,
          image: "http://habitat.especies.cn/static/specie/photos/白头鹎1.jpg",
          name: "白头鹎",
          audio: "http://36.139.133.119:6125/static/stock/250612/40_2228258_250612-062034.wav",
          create_time: "2025-06-12 06:20:34"
        },
        {
          type: "audio",
          id: 200439,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/avatar/Gallinago_gallinago.jpg",
          name: "扇尾沙锥",
          audio: "http://36.139.133.119:6125/static/stock/250612/40_2228258_250612-062938.wav",
          lon_gd:121.44413,
          lat_gd:31.151022,
          create_time: "2025-06-12 06:29:38"
        },
        {
          type: "video",
          id: 210439,
          device_name:'虫情',
          name: "扇尾沙锥",
          video: "https://ui.ecoheze.com/weed/102,10573b53826287.mp4",
          lon_gd:121.435241,
          lat_gd:31.145399,
          create_time: "2025-06-12 06:29:38"
        },
        {
          type: "video",
          id: 220439,
          device_name:'虫情',
          name: "扇尾沙锥",
          video: "https://ui.ecoheze.com/weed/102,10573b53826287.mp4",
          lon_gd:121.444241,
          lat_gd:31.148957,
          create_time: "2025-06-12 06:29:38"
        },
        {
          type: "audio",
          id: 200441,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/photos/灰喜鹊1.jpg",
          name: "灰喜鹊",
          audio: "http://36.139.133.119:6125/static/stock/250612/40_2228258_250612-064314.wav",
          lon_gd:121.441263,
          lat_gd:31.149226,
          create_time: "2025-06-12 06:43:14"
        },
        {
          type: "audio",
          id: 200450,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-061130.wav",
          lon_gd:121.441263,
          lat_gd:31.149226,
          create_time: "2025-06-12 06:11:30"
        },
        {
          type: "audio",
          id: 200452,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-061346.wav",
          lon_gd:121.439425,
          lat_gd:31.146322,
          create_time: "2025-06-12 06:13:46"
        },
        {
          type: "audio",
          id: 200451,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-062034.wav",
          lon_gd:121.437652,
          lat_gd:31.148291,
          create_time: "2025-06-12 06:20:34"
        },
        {
          type: "audio",
          id: 200453,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-064314.wav",
          lon_gd:121.437097,
          lat_gd:31.145392,
          create_time: "2025-06-12 06:43:14"
        },
        {
          type: "audio",
          id: 200454,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-064746.wav",
          lon_gd:121.436561,
          lat_gd:31.149235,
          create_time: "2025-06-12 06:47:46"
        },
        {
          type: "audio",
          id: 200449,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-060914.wav",
          lon_gd:121.434788,
          lat_gd:31.148255,
          create_time: "2025-06-12 06:09:14"
        },
        {
          type: "audio",
          id: 200453,
          device_name:'虫情',
          image: "http://habitat.especies.cn/static/specie/images/Eophona_migratoria/51002993662_4e37c57cf2_b.jpg",
          name: "黑尾蜡嘴雀",
          audio: "http://36.139.133.119:6125/static/stock/250612/41_3866693_250612-064314.wav",
          lon_gd:121.443335,
          lat_gd:31.147711,
          create_time: "2025-06-12 06:43:14"
        }
      ],
      lastTime:this.get30MinuteAgo(),
      currentContent: null,
      position:{lon:121.444162, lat:31.147243,zoom:16.35}
    };
  },
  created() {
    that=this;
  },
  mounted() {
    // 监听 DeviceList 组件的设备列表加载完成事件
    EventBus.$emit("set-position", this.position);
    EventBus.$emit("map-show", true);
    this.timer=setInterval(function () {
      that.getData();
    }, 30000);
  },
  methods: {
    handleDeviceClick(device) {
      this.currentContent = device;
    },
    get30MinuteAgo(){
      const currentDate = new Date();
      currentDate.setMinutes(currentDate.getMinutes()-30);
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
      const day = currentDate.getDate();
      const hours = String(currentDate.getHours()).padStart(2, '0');
      const minutes = String(currentDate.getMinutes()).padStart(2, '0');
      const seconds = String(currentDate.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${
              hours}:${
              minutes}:${
              seconds}`;
    },
    getTime(){
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
      const day = currentDate.getDate();
      const hours = String(currentDate.getHours()).padStart(2, '0');
      const minutes = String(currentDate.getMinutes()).padStart(2, '0');
      const seconds = String(currentDate.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${
              hours}:${
              minutes}:${
              seconds}`;
    },
    getData(){
      if(this.lastTime){
        this.$api.device.getNewIdentify(this.lastTime).then(res => {
          EventBus.$emit('add-identify', res)
        });
      }
      this.lastTime=this.getTime();
    },
  },
};
</script>
<style>
  .left-section{
    animation: enterLeft 1s ease forwards;
  }
  .right-section{
    animation: enterRight 1s ease forwards;
  }
  .fadel-enter-active{
    animation: enterLeft 1s ease forwards;
  }
  .fadel-leave-active {
    animation: leaveLeft 1s ease forwards;
  }
  .fadel-enter, .fadel-leave-to {
    opacity: 0;
  }

  /* 定义动画 */
  @keyframes leaveLeft {
    from {
      transform: translateX(0); /* 从顶部开始 */
    }
    to {
      transform: translateX(-100%); /* 移动到原始位置 */
    }
  }
  /* 定义动画 */
  @keyframes enterLeft {
    from {
      transform: translateX(-100%); /* 从顶部开始 */
    }
    to {
      transform: translateX(0); /* 移动到原始位置 */
    }
  }
  @keyframes enterRight {
    from {
      transform: translateX(100%); /* 从顶部开始 */
    }
    to {
      transform: translateX(0); /* 移动到原始位置 */
    }
  }
</style>